<template>
  <div class="hello">
    <div class="hello-header">
		  <img src="../assets/news.png" alt="">
      <h3>发现</h3>
      <!-- <router-link to="/city" class="city"> -->
        <p>全国<i class="el-icon-arrow-down"></i></p>
      <!-- </router-link> -->
    </div>
    <div class="hello-main">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <router-link to="/introduce" class="d">
        <li v-for="value in obj" @click="send(value.tid)">
          <img v-bind:src="value.pic" alt="">
          <h3>{{value.name}}</h3>
          <p>{{value.des}}</p>
          <img v-bind:src="value.type" alt="" v-get class="biao">
        </li>
      </router-link>
      </ul>
      <p v-if="show" style="text-align: center;">暂无更多数据</p>
    </div>
  </div>
</template>

<script>
import url from '../data/find.json' 
var arr = [];
for(var i= 0;i < 20;i++){
  arr.push(url.pageInfo.list[i])
}
export default {
  name: 'find',
  data:function(){
    return {
      obj : arr,
      show:false  
    }
  },
  methods:{
    send:function(a){
      eventBus.data = a;
    },
    loadMore() {
      this.loading = true;
      if(this.obj.length < url.pageInfo.list.length - 1){
        setTimeout(() => {
          console.log(1)
          for (let i = 1; i <= 10; i++) {
            let last = url.pageInfo.list[this.obj.length];
            this.obj.push(last);
          }
          this.loading = false;
        }, 2500);
      }else{
        this.show = true;
         this.loading = false;
      }
    }
  },
  directives:{
      get:{
        inserted:function(t){
          if(t.src == 'http://localhost:8282/7'){
            t.src="http://javaapi.tgljweb.com:9090/api/templates/travel/find/img/zc_impress@3x.png"
          } else if (t.src == 'http://localhost:8282/8'){
            t.src = 'http://javaapi.tgljweb.com:9090/api/templates/travel/find/img/zc_tralve@3x.png'
          } 
        }
      }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.hello{
	width: 100%;
	.hello-header{
		width: 100%;
		height: 60px;
		background-color: white;
    position: fixed;
    top:0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 999;
    img{
      width: 5%;  
    }
    .city{
      color: black;
      text-decoration: none;
    }
	}
  .hello-main{
    width: 100%;
    margin: 60px 0 70px 0;
    .d{
      text-decoration: none;
      li{
        position: relative;
        .biao{
          width: 20%;
          position: absolute;
          top:15px;
          right: 15px;
        }
      }
    }
   
    li{
      width: 100%;
      border-top:1px solid #c5c5c5;
      padding: 15px;
      box-sizing: border-box;
      color: black;
      img{
        width:100%;
      }
      p{
        margin:8px 0;
      }
    }
  }
}
</style>